import React from "react";
import "swiper/swiper-bundle.min.css";
import SwiperCore, { Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/react";
import { SliderContainer } from "./style";

SwiperCore.use([Pagination]);

function Slider(props) {
  const { bannerList } = props;

  return (
    <SliderContainer>
      <Swiper
        spaceBetween={20}
        pagination={{ clickable: true }}
        onSlideChange={() => console.log("slide change")}
        onSwiper={(swiper) => console.log(swiper)}
      >
        {bannerList.map((item, index) => (
          <SwiperSlide key={index}>
            <img className="swiper-img" src={item.imageUrl} alt="推荐" />
          </SwiperSlide>
        ))}
      </Swiper>
    </SliderContainer>
  );
}

export default React.memo(Slider);
